<template>
  <div>
    <el-form-item label="文本对齐">
      <el-radio-group v-model="localData.styles.textAlign">
        <el-radio label="left">左</el-radio>
        <el-radio label="center">中</el-radio>
        <el-radio label="right">右</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="颜色">
      <el-color-picker v-model="localData.styles.color" size="mini" />
    </el-form-item>
    <el-form-item label="字体大小">
      <el-input v-model="localData.styles.fontSize" clearable placeholder="字体大小" />
    </el-form-item>
    <el-form-item label="字体位置">
      <el-input v-model="localData.styles.lineHeight" clearable placeholder="字体位置" />
    </el-form-item>
    <el-form-item label="粗体">
      <el-select v-model="localData.styles.fontWeight" placeholder="粗体" clearable>
        <el-option v-for="item in options" :key="item" :label="item" :value="item" />
      </el-select>
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: 'ConfigTitle',
  props: {
    data: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      options: [
        '100',
        '200',
        '300',
        '400',
        '500',
        '600',
        '700',
        '800',
        '900',
        'blod',
        'bloder',
        'inherit',
        'initial',
        'lighter',
        'normal',
        'revert',
        'unset'
      ],
      localData: {}
    }
  },
  watch: {
    data: {
      handler(newVal) {
        if (newVal) {
          this.localData = newVal
        }
      },
      deep: true,
      immediate: true
    },
    localData: {
      handler(newVal) {
        this.$emit('update:data', newVal)
      },
      deep: true
    }
  }
}
</script>
